<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      #box {
        width: 1080px;
        margin: 10px auto;
        overflow: hidden;
      }

      #box ul {
        width: 250px;
        margin: 0 10px;
        float: left;
      }

      #box ul li {
        width: 248px;
        margin-bottom: 10px;
        border: 1px solid #ff4100;
      }

      #box ul li img {
        width: 100%;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <ul>
        <!-- <li><img src="./img/28.jpg" alt="./img/01.jpg"></li> -->
      </ul>
      <ul>
        <!-- <li><img src="./img/29.jpg" alt="./img/02.jpg"></li> -->
      </ul>
      <ul>
        <!-- <li><img src="./img/25.jpg" alt="./img/03.jpg"></li> -->
      </ul>
      <ul>
        <!-- <li><img src="./img/26.jpg" alt="./img/04.jpg"></li> -->
      </ul>
    </div>
    <script>
      var box = document.getElementById("box");
      var uls = box.children;
      var imgArr = [
        "avatar.png",
        "defaultInteriorBackgroundBanner.jpg",
        "Logo.png",
        "avatar.png",
        "defaultInteriorBackgroundBanner.jpg",
      ];
      // console.log(uls)
      //1、封装添加元素功能
      function _add() {
        //1-1、创建元素
        var lis = document.createElement("li");
        //1-2、设置随机值
        // var i = Math.floor(Math.random() * (29 - 21 + 1) + 21);
        var i = Math.floor(Math.random() * imgArr.length);
        //1-3、给li添加内容
        lis.innerHTML = `<img src='../img/${imgArr[i]}'/>`;

        // lis.innerHTML = `<img src='../img/defaultInteriorBackgroundBanner.jpg'/>`;
        //1-4、获取每一个uls的高度
        var uls1 = uls[0].offsetHeight;
        var uls2 = uls[1].offsetHeight;
        var uls3 = uls[2].offsetHeight;
        var uls4 = uls[3].offsetHeight;
        //1-5、获取最小高度
        var minH = Math.min(uls1, uls2, uls3, uls4);
        // console.log(minH,uls1,uls2,uls3,uls4)
        //1-6、设置一个变量来存储随机高度
        var mathH;
        for (var i = 0; i < uls.length; i++) {
          if (uls[i].offsetHeight == minH) {
            mathH = uls[i];
          }
        }
        //1-7、把li插入到ul中
        mathH.appendChild(lis); // == uls[i].appendChild
      }
      //2、生成默认显示个数
      for (var i = 0; i < 20; i++) {
        _add();
      }

      //3、绑定滚轮事件
      document.onscroll = function () {
        //3-1、获取滚动条的距离
        var t = document.body.scrollTop || document.documentElement.scrollTop;
        //3-2、获取浏览器的高度
        var winH = document.documentElement.clientHeight;
        //3-3、获取文档的高度
        var docH = document.documentElement.offsetHeight;
        //3-4、差值
        var cha = docH - winH - t;
        //3-5、当差值小于多少时生成多少个图片
        if (cha < 100) {
          console.log("aaa");
          for (var i = 0; i < 16; i++) {
            _add();
          }
        }
      };
    </script>
  </body>
</html>
